<script setup>
const list = [
  {
    title: "客户",
    children: [
      {
        title: "TOB",
      },
      {
        title: "TOC",
      },
    ],
  },
  {
    title: "业务",
    children: [
      {
        title: "生成式AI",
      },
      {
        title: "云电脑",
      },
      {
        title: "云游戏",
      },
      {
        title: "...",
      },
    ],
  },
  {
    title: "GPU计算平台",
    children: [
      {
        title: "GPU虚拟化",
      },
      {
        title: "广域分布式文件系统",
      },
      {
        title: "AI基础设施",
      },
    ],
  },
  {
    title: "芯片",
    children: [
      {
        title: "国外GPU",
      },
      {
        title: "国产GPU",
      },
    ],
  },
];
</script>

<template>
  <div class="py-[40px]">
    <div
      class="border-[2px] border-[#21278f] min-h-[500px] rounded-lg p-[30px] tracking-[1px]"
    >
      <div class="text-[#21278f] text-[28px] text-center">
        成立于2023年,主要提供面向生成式AI,云电脑和云游戏等业务的GPU计算平台
      </div>
      <div class="text-[#21278f] text-[24px] text-center mt-[10px]">
        致力于推动国产GPU芯片的广泛使用，促进GPU产业的国产替代
      </div>
      <div
        class="mt-[30px] border-[1px] border-[#21278f] border-dashed h-[60px] rounded-lg flex items-center space-x-[20px] font-bold"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="w-[150px] text-[18px] pl-[20px] font-bold text-[#21278f]">
          {{ item.title }}
        </div>
        <div
          v-for="(list, i) in item.children"
          :key="i"
          class="border-[1px] border-[#21278f] text-[#21278f] h-[40px] w-[150px] rounded-lg flex items-center justify-center cursor-pointer transition-all duration-700 hover:text-[#fff] hover:bg-[#21278f]"
        >
          {{ list.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<style></style>
